<div class="grid l:grid-cols-2 gap-6 mb-4">
  <div class="flex flex-col gap-4">
    <% if @billboard.creator.present? %>
      <div class="crayons-field">
        <%= label_tag :creator, "Created by:", class: "crayons-field__label" %>
        <%= text_field_tag :creator, @billboard.creator.name, class: "crayons-textfield", disabled: true, autocomplete: "off" %>
      </div>
    <% end %>

    <div class="crayons-field">
      <%= label_tag :name, "Name:", class: "crayons-field__label" %>
      <%= text_field_tag :name, @billboard.name, class: "crayons-textfield", autocomplete: "off" %>
    </div>

    <div class="crayons-field">
      <%= label_tag :organization_id, "Organization ID:", class: "crayons-field__label" %>
      <%= text_field_tag :organization_id, @billboard.organization_id, class: "crayons-textfield", placeholder: "1234", autocomplete: "off" %>
    </div>

    <div class="crayons-field">
      <%= label_tag :custom_display_label, "Custom author display name:", class: "crayons-field__label" %>
      <%= text_field_tag :custom_display_label, @billboard.custom_display_label, size: "100x5", class: "crayons-textfield", autocomplete: "off" %>
    </div>

    <div class="crayons-field">
      <%= label_tag :body_markdown, "Body Content:", class: "crayons-field__label" %>
      <%= text_area_tag :body_markdown, @billboard.body_markdown, size: "100x5", class: "crayons-textfield" %>
    </div>

    <div class="crayons-field">
      <%= label_tag :render_mode, "Render Mode:", class: "crayons-field__label" %>
      <%= select_tag :render_mode, options_for_select([["Forem Markdown", "forem_markdown"], ["Raw", "raw"]], selected: @billboard.render_mode), class: "crayons-select" %>
    </div>

    <div class="crayons-field">
      <%= label_tag :template, "Template:", class: "crayons-field__label" %>
      <%= select_tag :template, options_for_select([["Authorship Box", "authorship_box"], ["Plain", "plain"]], selected: @billboard.template), class: "crayons-select" %>
    </div>

    <div class="crayons-field">
      <%# styles below are a hack to line this up properly%>
      <%= label_tag :color, "Border hex color:", class: "crayons-field__label" %>
      <div class="flex items-center w-100" style="margin-top: -26px;">
        <style>
          #color-popover-btn-color { top: 36px; }
        </style>
        <%= text_field_tag :color, @billboard.color, class: "crayons-textfield", placeholder: "#000000", data: { color_picker: true, label_text: "Border color" } %>
      </div>
    </div>

    <div class="crayons-field">
      <%= label_tag :placement_area, "Placement Area:", class: "crayons-field__label" %>
      <%= select_tag :placement_area, options_for_select(billboards_placement_area_options_array, selected: @billboard.placement_area), include_blank: "Select...", class: "crayons-select js-placement-area" %>
    </div>

    <div class="crayons-field billboard-requires-precision-targeting hidden">
      <%= label_tag :browser_context, "Browser context:", class: "crayons-field__label" %>
      <%= select_tag :browser_context, options_for_select([["All browsers", "all_browsers"], ["Desktop", "desktop"], ["Mobile web", "mobile_web"], ["Mobile in-app", "mobile_in_app"]], selected: @billboard.browser_context), class: "crayons-select js-placement-area" %>
    </div>

    <div class="crayons-field">
      <div id="billboard-targeted-tags"></div>
    </div>

    <% if FeatureFlag.enabled?(Geolocation::FEATURE_FLAG) %>
      <div class="crayons-field billboard-requires-precision-targeting hidden">
        <%= label_tag :target_geolocations, "Target Geolocations:", class: "crayons-field__label" %>
        <%= text_field_tag :target_geolocations, @billboard.target_geolocations.map(&:to_iso3166).join(", "), class: "crayons-textfield", placeholder: "US-NY, CA-ON", autocomplete: "off" %>
      </div>
    <% end %>

    <div class="crayons-field hidden">
      <%= label_tag :tag_list, "Tag List:", class: "crayons-field__label" %>
      <%= text_field_tag :tag_list, @billboard.tag_list.to_s, class: "crayons-textfield js-tags-textfield", autocomplete: "off" %>
    </div>

    <div class="crayons-field hidden">
      <%= label_tag :exclude_article_ids, "Exclude Article IDs:", class: "crayons-field__label" %>
      <%= text_field_tag :exclude_article_ids, @billboard.exclude_article_ids.join(", "), class: "crayons-textfield js-exclude-ids-textfield", autocomplete: "off" %>
    </div>

    <div class="crayons-field">
      <fieldset aria-describedby="section-description" aria-describedby="display-to-description">
        <legend class="crayons-field crayons-field__label pl-0">Display to user group</legend>
        <p id="display-to-description" class="crayons-field__description mb-2">Determines which user group will be able to see the Billboard</p>

        <label class="crayons-field crayons-field--radio mb-2">
          <%= radio_button_tag :display_to, "all", @billboard.display_to_all?, class: "crayons-radio" %>
          <div class="crayons-field__label">All users</div>
        </label>

        <label class="crayons-field crayons-field--radio mb-2">
          <%= radio_button_tag :display_to, "logged_in", @billboard.display_to_logged_in?, class: "crayons-radio" %>
          <div class="crayons-field__label">Only logged in users</div>
        </label>

        <label class="crayons-field crayons-field--radio mb-2">
          <%= radio_button_tag :display_to, "logged_out", @billboard.display_to_logged_out?, class: "crayons-radio" %>
          <div class="crayons-field__label">Only logged out users</div>
        </label>
      </fieldset>
    </div>

    <div class="crayons-field <%= "hidden" unless @billboard.display_to_logged_in? %>">
      <%= label_tag :audience_segment_id, "Users in segment:", class: "crayons-field__label" %>
      <% if @billboard.audience_segment&.manual? %>
        <%= select_tag :audience_segment_id,
                       options_for_select(single_audience_segment_option(@billboard), selected: @billboard.audience_segment_id),
                       disabled: true,
                       class: "crayons-select js-user-target" %>
      <% else %>
        <%= select_tag :audience_segment_id,
                       options_for_select(automatic_audience_segments_options_array, selected: @billboard.audience_segment_id),
                       include_blank: "All users",
                       class: "crayons-select js-user-target" %>
      <% end %>
    </div>

    <div class="crayons-field <%= "hidden" unless @billboard.display_to_logged_in? %>">
      <%= label_tag :target_role_names, "Target Role Names:", class: "crayons-field__label" %>
      <%= text_field_tag :target_role_names, @billboard.target_role_names.join(", "), class: "crayons-textfield js-user-target", autocomplete: "off", placeholder: "e.g. admin, tag_moderator" %>
    </div>

    <div class="crayons-field <%= "hidden" unless @billboard.display_to_logged_in? %>">
      <%= label_tag :exclude_role_names, "Exclude Role Names:", class: "crayons-field__label" %>
      <%= text_field_tag :exclude_role_names, @billboard.exclude_role_names.join(", "), class: "crayons-textfield js-user-target", autocomplete: "off" , placeholder: "e.g. admin, tag_moderator" %>
    </div>

    <div class="crayons-field">
      <fieldset aria-describedby="section-description" aria-describedby="type-of-description">
        <legend class="crayons-field crayons-field__label pl-0">Type</legend>

        <label class="crayons-field crayons-field--radio mb-2">
          <%= radio_button_tag :type_of, "in_house", @billboard.in_house?, class: "crayons-radio" %>
          <div class="crayons-field__label">In-House Ad</div>
        </label>

        <label class="crayons-field crayons-field--radio mb-2">
          <%= radio_button_tag :type_of, "community", @billboard.community?, class: "crayons-radio" %>
          <div class="crayons-field__label">Community</div>
        </label>

        <label class="crayons-field crayons-field--radio mb-2">
          <%= radio_button_tag :type_of, "external", @billboard.external?, class: "crayons-radio" %>
          <div class="crayons-field__label">External</div>
        </label>
      </fieldset>
    </div>

    <div class="crayons-field">
      <%= label_tag :published, "Published:", class: "crayons-field__label" %>
      <%= select_tag :published, options_for_select([false, true], selected: @billboard.published), class: "crayons-select" %>
    </div>

    <div class="crayons-field">
      <%= label_tag :approved, "Approved:", class: "crayons-field__label" %>
      <%= select_tag :approved, options_for_select([false, true], selected: @billboard.approved), class: "crayons-select" %>
    </div>

    <div class="crayons-field">
      <%= label_tag :expires_at, "Expires at:", class: "crayons-field__label" %>
      <%= datetime_local_field_tag :expires_at, @billboard.expires_at&.strftime("%Y-%m-%dT%H:%M"), class: "crayons-textfield", placeholder: "Leave blank for no expiration" %>
      <p class="crayons-field__description">Billboard will automatically be marked as not approved after this time</p>
    </div>

    <div class="crayons-field">
      <%= label_tag :priority, "Prioritized:", class: "crayons-field__label" %>
      <%= select_tag :priority, options_for_select([false, true], selected: @billboard.priority), class: "crayons-select" %>
    </div>
  </div>
  <div>
    <div class="crayons-card crayons-card--secondary crayons-bb text-styles text-styles--billboard" style="<%= @billboard.style_string %>">
      <% if @billboard.persisted? %>
        <%= @billboard.processed_html.html_safe %>
      <% else %>
        <div class="flex flex-col gap-3">
          <p>
            Billboards will show up in the designated placement area <strong>once published and approved</strong>. You can safely preview them here before publishing.
          </p>
          <p>
            Multiple billboards that share the same placement area will be swapped every few minutes. <strong>The units with the most engagement will show up the most often</strong>.
          </p>
          <p>
            Organization ID is optional. Use it if you want to attribute a billboard to a specific organization.
          </p>
        </div>
      <% end %>
    </div>
  </div>
</div>

<%= javascript_include_tag "admin/billboards", defer: true %>
<%= javascript_include_tag "enhanceColorPickers", defer: true %>
